<template>
  <div>
    <img class="banner" src="../../assets/news_banner.png" alt="">
    <page-breadcrumbs :crumbData="crumbData"></page-breadcrumbs>
    <div class="content-box">
      <div class="title font-16">{{newsObj.title}}</div>
      <div class="time">{{newsObj.update_time}}</div>
      <img class="top-img" :src="newsObj.top_img" alt="">
      <div class="content font-14" v-html="newsObj.detail"></div>
    </div>
    <page-footer></page-footer>
  </div>
</template>

<script>
import PageBreadcrumbs from 'components/Breadcrumbs'
import PageFooter from 'components/Footer'
import news from '@/model/news'
export default {
  name: 'detail',
  components: {
    PageBreadcrumbs,
    PageFooter
  },
  data () {
    return {
      newsObj: {
        title: '',
        update_time: '',
        top_img: '',
        detail: ''
      },
      crumbData: [{
        title: '首页', jump: '/'
      }, {
        title: '新闻中心', jump: '/news'
      }, {
        title: '新闻详情', jump: ''
      }]
    }
  },
  async created () {
    await this.getNewsDetail()
  },
  methods: {
    async getNewsDetail () {
      try {
        const id = this.$route.params.id
        this.newsObj = await news.getNewsDetail(id)
        console.log(this.newsObj)
      } catch (error) {
        if (error.code === 10020) {
          this.onlineBrandData = []
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable.styl"
  .banner
    width 100%
  .content-box
    width 95%
    margin 0 auto
    display flex
    flex-direction column
    .title
      color #333
      font-weight bold
      line-height .8rem
    .time
      color #999
    .top-img
      width 96%
      padding .2rem
</style>
